<template>
<div class="mBasicFinish">
  <el-table :data="mentorBsasicStore.mBasicFinishData" style="width: 100%; height: 90%; font-size: 18px;">
    <el-table-column prop="name" label="问卷名称" min-width="250"/>
    <el-table-column prop="startTime" label="开始时间" min-width="80"/>
    <el-table-column prop="endTime" label="结束时间" min-width="80"/>
    <el-table-column prop="state" label="任务状态"  min-width="50"/>
    <el-table-column prop="do" label="操作" width="120" >
      <template #default="{row}">
        <el-button link type="primary" size="large" @click="mentorfinishClick(row)" style="font-size: 18px; color: #071c7b;">
          查看详情
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 底部分页器 -->
  <div class="footer">
    <div class="left">
      <div class="total">共计: {{ mentorBsasicStore.mBasicFinishData.length }} 条</div>
    </div>
    <div class="right">
      <div class="pagination">
        <el-pagination
          v-model="currentPage"
          layout="prev, pager, next"
          :total="mentorBsasicStore.mBasicFinishData.length"
          :page-size="pageSize"
          background
          size="small"
        />                        
      </div>
      <div class="selector">
        <el-select v-model="pageSize" placeholder="每页条数" style="width: 80px;" size="small">
          <el-option label="5条/页" :value="5"></el-option>
          <el-option label="10条/页" :value="10"></el-option>
          <el-option label="20条/页" :value="20"></el-option>
        </el-select>
      </div>
      <div class="jump">
        <span>前往:</span>
        <el-input-number
          v-model="currentPage"
          :min="1"
          :max="Math.ceil(mentorBsasicStore.mBasicFinishData.length / pageSize)"
          :controls="false"
          style="width: 3vw;"
          size="small"
        />
      </div>                        
    </div>
  </div>
</div>  
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import router from '@/router';
import { useMentorBasicStore } from '@/stores/mentor/mBasic';

const mentorBsasicStore = useMentorBasicStore()

onBeforeMount(() => {
  mentorBsasicStore.mBasicFinishRequest()
})

// 当前在第几页
let currentPage = ref(1)
const pageSize = ref(5); // 每页显示的条数

const mentorfinishClick = (row) => {
  router.push({
    name:'finishDetail',
    query:{id:row.id}
  })
}

</script>

<style scoped lang="scss">
.mBasicFinish {
  width: 100%;
  height: 100%;      
  background-color: #fff;
  padding: 10px;

  .footer {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
        width: fit-content;
        .total {
            padding-left: 15px;
            font-size: 12px;
        }
    }
    .right{
        width: fit-content;
        height: 100%;
        display: flex;
        align-items: center;
        .pagination, .selector{
            margin-right: 15px;
        }
        .jump{
            margin-right: 15px;
            span{
                margin-right: 5px;
                font-size: 12px;
            }
        }
    }
}
  }

  .unfinish {
    color: #b31219;
  }
  .change {
    color: #5328e3;
  }

</style>